<template>
    <div class="Christmas">
        <!--头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">情人节花艺合辑</p>
        </Top>
        <!-----------中------------->
        <!--有数据显示-->
        <div class="table-main" v-if="DATA && DATA.lession.length>0">
            <cube-scroll
                         ref="scroll"
                         :data="DATA.lession">

                <!--产品列表-->
                <ul class="lists">
                    <router-link 
                                 tag="li" 
                                 :to="{path:'detail',query:{lession_id:item.lession_id,member_id:getMemberId(),prev:true}}" 
                                 class="clearfix animated slideInRight" 
                                 :style="{animationDelay:delay(index)}"  
                                 v-for="(item,index) in DATA.lession" :key="index">
                        <img :src="item.lession_img" alt="">
                        <div class="infos">
                            <h4 class="tit"><span class="end" v-if="item.is_complete===1">完结</span>{{item.lession_name}}</h4>
                            <p class="admin"><span>{{item.teacher_name}}</span><span>{{item.teacher_level}}</span><span><i class="el-icon-star-off"></i>{{item.lession_level}}</span></p>
                            <div class="other">
                                <span><i class="el-icon-view"></i>&#8197;{{item.lession_view}}</span>
                                <span><i class="el-icon-time"></i>&#8197;{{item.lession_num_hour}}课时</span>
                                <span v-if="item.lession_price>0"><strong>{{item.lession_price}}</strong>花瓣</span>
                                <span v-else><strong>免费</strong></span>
                            </div>
                            <p class="starttime" v-if="item.lession_time && item.is_more===1">开课时间：{{item.lession_time}}&emsp;{{item.lession_update_time}}</p>
                        </div>
                    </router-link>
                </ul>

            </cube-scroll>
        </div>
        <!--底部-->
        <div class="Christmas__table clearfix" v-if="DATA && DATA.lession.length>0">
            <div class="Christmas__table__left">
                <h4>情人节花艺合辑，共<span class="vi__color">{{DATA.lession.length}}</span>课：<em class="vi__color">￥</em><b class="vi__color">{{DATA.order_amount}}</b></h4>
                <p>原价 <em class="vi__color old__price">{{DATA.original_amount}}</em> 元</p>
            </div>
            <div class="Christmas__table__right" @click="buyHandle()">立即购买</div>
        </div>
        <!--无数据时显示-->
        <div class="table-main" v-if="DATA && DATA.lession.length<1">
            <div class="nodata animated fadeIn">
                <img src="../../assets/huawa-off.png" alt="" />
                <p>暂无数据..</p>
            </div>
        </div>
        <!--购买流程弹窗-->
        <Buying ref="Buying" :DATA="DATA" @buyingCaller="init()"></Buying>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import Buying from '@/components/modules/Buying'
    export default {
        name: 'Christmas',
        components: {
            Top,//顶部信息组件
            Buying,
        },
        data () {
            return {
                DATA:null,
            }
        },
        created(){
            this.init()
        },
        methods:{
            init(){
                this.Posthttp('/?method=flower.index.suitList',{member_id:this.getMemberId()},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.DATA = JSON.parse(res.bodyText).data
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg)
                    }

                })
            },
            buyHandle(){
                this.$refs.Buying.init()
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Christmas {
        width: 100%;
        height: 100%;
        .table-main{
            position: fixed;
            left: 0;
            right: 0;
            top: .8rem;
            bottom: .9rem;
        }
        .lists{
            overflow-x: hidden;
            padding: 0 .26rem;
            li{
                width: 100%;
                padding:.34rem 0;
                border-bottom: 1px solid #e4e4e4;
                animation-duration:.6s;
                &:last-child{
                    border-bottom: 0;
                }
                /*左侧图片*/
                img{
                    width: 1.88rem;
                    height: 1.35rem;
                    float: left;
                }
                /*右侧信息*/
                .infos{
                    margin-left: 1.88rem;
                    padding-left: .2rem;
                    position: relative;
                    /*标题*/
                    .tit{
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: #333;
                        height: .34rem;
                        line-height: .34rem;
                        margin-bottom: .24rem;
                        span.end{
                            display: inline-block;
                            height: 100%;
                            font-size: .28rem;
                            padding: 0 .12rem;
                            border-radius: .06rem;
                            margin-right: .1rem;
                            color: #fff;
                            background-color: #e7470e;
                        }
                    }
                    /*老师*/
                    .admin{
                        color: #777;
                        margin-bottom: .28rem;
                        font-size: .22rem;
                        display: flex;
                        justify-content: space-between;
                        span{
                            width: 32%;
                            text-align: justify;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            padding: .1rem 0;
                        }
                    }
                    /*其他*/
                    .other{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        font-size: .22rem;
                        strong{
                            font-size: .28rem;
                            color: #e7470e;
                            font-weight: 600;
                            margin-right: .02rem;
                        }
                    }
                    /*开课时间*/
                    .starttime{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: .2rem;
                        font-size: .2rem;
                    }
                }
            }
        }
        .Christmas__table{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: .9rem;
            box-shadow: 0 1px 5px rgba(0,0,0,.2);
            .Christmas__table__left{
                width: 4.3rem;
                height: 100%;
                float: left;
                text-align:right;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-right: .26rem;
                h4{
                    color: #000;
                    font-size: .26rem;
                }
                em{
                    font-size: .18rem;
                }
                p{
                    font-size: .18rem;
                    color: #666;
                    margin-top: .14rem;
                }
                b{
                    font-weight: 600;
                    font-size: .3rem;
                }
                .old__price{
                    text-decoration: line-through;
                }
            }
            .Christmas__table__right{
                margin-left: 4.3rem;
                background: $vi__color;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: .28rem;
            }
        }
    }
</style>
